<!DOCTYPE html>
<html lang="en">
  <!-- 
            绑定样式：
                    1.class样式
                            写法：class="xxx" xxx 可以是字符串、对象、数组
                                字符串写法使用于：类名不确定，要动态获取
                                数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
                                数组写法适用于：要绑定多个样式，个数确定，名字也确定。但是不确定用不用
                    2.style样式
                            :style="{fontSize:xxx}"其中xxx是动态值
                            :style="[a,b]"其中a、b是样式对象
-->

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
      .basis {
        width: 200px;
        height: 200px;
        border: 5px solid slateblue;
      }

      .p2 {
        background: springgreen;
      }

      .p3 {
        border-radius: 20px;
        border: 5px solid slateblue;
      }
    </style>
  </head>

  <body>
    <div id="root">
      <!-- （1）绑定class一般用于某个整体样式 -->

      <!-- 绑定class样式——字符串写法：适用于：样式的类名不确定，需要动态指定 -->
      <!-- 这里的p3不直接代表字符串，而是一个变量，因为：绑定后边都是动态表达式，而不是单纯的字符串给这里注意 -->
      <div class="basis" :class="p3">{{name}}</div>
      <!-- 绑定class样式——数组写法：适用于：要绑定的样式个数不确定，名字也不确定 -->
      <div class="basis" :class="arr">{{name}}</div>
      <!-- 绑定class样式——对象写法：适用于：要绑定的样式个数确定，名字也确定，但是要动态决定用不用 -->
      <div class="basis" :class="obj">{{name}}</div>

      <!-- （2）style绑定一般单个属性 -->
      <!-- 绑定style样式——对象写法 -->
      <div class="basis" :style="styleObj">{{name}}</div>
      <!-- 绑定style样式——数组写法 -->
      <div class="basis" :style="[styleObj,styleObj2]">{{name}}</div>
    </div>
    <script>
      Vue.config.productionTip = false //以阻止vue在启动时生成生产提示
      const Vm = new Vue({
        el: '#root',
        data: {
          name: '名师',
          p3: 'p3',
          arr: ['p3', 'p2'], //尽量这种写法,之前直接以表达式的形式写到class时也可以,但是尽量放到data下,最起码可以增删改,比如通过点击删除某个样式,或者增加某个样式
          obj: {
            p2: true,
            p3: true,
          },
          styleObj: {
            fontSize: '40px', //在css中font-size绑定的时候去掉-后边首字母大写
          },
          styleObj2: {
            color: 'red',
          },
        },
      })
    </script>
  </body>
</html>
